$nav-tabs-item: (
  'height': 34px,
  'margin': 0 5px 0 0,
  'font-size': getCssVar(font-size, header, 6),
  'font-weight': getCssVar(font-weight, regular),
  'border': 1px solid #dcdfe6,
  'border-radius': getCssVar(border, radius, extra, small),
);

@include b(top-nav-tabs) {
  @include set-component-css-var('nav-tabs-item', $nav-tabs-item);
  @include flex(row, flex-start, center);

  --el-text-color-placeholder: #{getCssVar(color, text, 0)};

  width: 100%;
  min-height: 50px;
  position: relative;
  padding: 0 getCssVar('spacing', 'base-loose');

  @include e(left) {
    flex-grow: 1;
    display: flex;
    width: calc(100% - 16px);
    align-items: center;

    .el-tabs {
      width: 100%;

      --el-tabs-header-height: #{getCssVar('nav-tabs-item', 'height')};

      .el-tabs__nav-prev,
      .el-tabs__nav-next {
        line-height: getCssVar('nav-tabs-item', 'height');
      }

      .el-tabs__nav {
        border: none;

        .el-tabs__item {
          opacity: 1;
          display: flex;
          overflow: hidden;
          align-items: center;
          vertical-align: middle;
          color: getCssVar('nav-tabs-item', 'color');
          border: getCssVar('nav-tabs-item', 'border');
          height: getCssVar('nav-tabs-item', 'height');
          padding: 0 getCssVar('spacing', 'base-loose');
          margin: getCssVar('nav-tabs-item', 'margin');
          font-size: getCssVar('nav-tabs-item', 'font-size');
          font-weight: getCssVar('nav-tabs-item', 'font-weight');
          border-radius: getCssVar('nav-tabs-item', 'border-radius');

          &:hover {
            color: getCssVar(color, primary);
            border: 1px solid getCssVar(color, primary);
          }

          &.is-active {
            color: getCssVar(color, primary);
            background-color: getCssVar(color, primary, hover);
            border: 1px solid getCssVar(color, primary);
          }
        }
      }

      .el-tabs__header {
        margin-bottom: 0;
        border-bottom: none;
      }
    }
  }

  @include e(item) {
    display: flex;
    align-items: center;
    max-width: 300px;

    @include m(icon) {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      width: getCssVar('width-icon', 'medium');
      height: getCssVar('width-icon', 'medium');
      margin-right: getCssVar(spacing, extra-tight);
    }

    @include m('caption') {
      flex-grow: 1;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  @include e(right) {
    flex-shrink: 0;
  }

  @include e(more) {
    cursor: pointer;
    color: #9a9a9a;
    display: inline-block;
    transition: transform 0.3s ease-out;

    @include m(icon) {
      width: 14px;
      height: 8px;
      display: block;
      text-align: left;
      position: relative;

      &::after,
      &::before {
        position: absolute;
        top: 2px;
        left: 0;
        width: 6px;
        height: 6px;
        content: '';
        background: #9a9a9a;
      }
    }

    @include m(left) {
      &::after {
        left: 8px;
      }

      &::before {
        transition: transform 0.3s ease-out 0.3s;
      }
    }

    @include m(right) {
      &::after {
        left: 8px;
      }
    }

    &:hover {
      transform: rotate(90deg);

      .#{bem('top-nav-tabs', 'more', 'icon')} {
        &::after,
        &::before {
          background: getCssVar('color', 'primary');
        }
      }

      .#{bem('top-nav-tabs', 'more', 'left')} {
        &::before {
          transform: rotate(45deg);
        }
      }
    }
  }

  @include e(popover) {
    padding: 5px 0 !important;
    width: 110px !important;
    min-width: 110px !important;

    @include m(item) {
      display: flex;
      cursor: pointer;
      padding: 5px 16px;
      line-height: 22px;
      align-items: center;

      &:hover {
        color: getCssVar(color, primary);
        background-color: getCssVar(color, primary, hover);
      }
    }

    @include m(item-icon) {
      display: flex;
      align-items: center;
      width: getCssVar(font-size, header, 5);
      height: getCssVar(font-size, header, 5);
      font-size: getCssVar(font-size, header, 5);
      margin-right: getCssVar('spacing', 'extra', 'tight');
    }

    @include m(item-caption) {
      font-size: getCssVar(font-size, header, 6);
    }
  }

  @include e(context-menu) {
    padding: 5px 0;
    background-color: getCssVar(color, bg, 3);
    border-radius: getCssVar(border, radius, small);
    
    @include m(item) {
      &:hover {
        color: getCssVar(color, primary);
        background-color: getCssVar(color, primary, hover);
      }
    }
  }
}
